<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="../common.css">
<style>
    .parallax>use {
        animation: move-forever 12s linear infinite;
        transform-origin: 50% 50%;
    }

    .parallax>use:nth-child(1) {
        animation-delay: -2s;
    }

    .parallax>use:nth-child(2) {
        animation-delay: -2s;
        animation-duration: 5s;
    }

    .parallax>use:nth-child(3) {
        animation-delay: -4s;
        animation-duration: 3s;
    }

    @keyframes move-forever {
        0% {
            transform: translate(-90px, 0%);
        }

        100% {
            transform: translate(85px, 0%);
        }
    }

    .editorial {
        display: block;
        width: 100%;
        height: 10em;
        margin: 0;
    }
</style>

<body>

    <svg class="editorial" xmlns="http://www.w3.org/2000/svg" viewBox="0 24 150 28" preserveAspectRatio="none">
        <defs>
            <path id="gentle-wave" d="m -160,44.4 c 30,0 58,
            -18 87.7,-18 30.3,0 58.3,
            18 87.3,18 30,0 58,-18 88,
            -18 30,0 58,18 88,18 l 0,
            34.5 -351,0 z" />
        </defs>
        <g class="parallax">
            <use xlink:href="#gentle-wave" x="50" y="0" fill="#ffa07a" />
            <use xlink:href="#gentle-wave" x="50" y="3" fill="#cd5c5c" />
            <use xlink:href="#gentle-wave" x="50" y="6" fill="#ff6347" />
        </g>
    </svg>
</body>

</html>